<HTML>
 <HEAD>
  <TITLE>自定义日期范围验证示例</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){
		//自定义VType类型，验证日期选择范围
		Ext.apply(Ext.form.field.VTypes, {
			//验证方法
			dateRange : function(val, field) {
				var beginDate = null,//开始日期
					beginDateCmp = null,//开始日期组件
					endDate = null,//结束日期
					endDateCmp = null,//结束日期组件
					validStatus = true;//验证状态
				if(field.dateRange){
					//获取开始时间
					if(!Ext.isEmpty(field.dateRange.begin)){
						beginDateCmp = Ext.getCmp(field.dateRange.begin);
						beginDate = beginDateCmp.getValue();
					}
					//获取结束时间
					if(!Ext.isEmpty(field.dateRange.end)){
						endDateCmp = Ext.getCmp(field.dateRange.end);
						endDate = endDateCmp.getValue();
					}
				}
				//如果开始日期或结束日期有一个为空则校验通过
				if(!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)){
					validStatus =  beginDate <= endDate;
				}
				
				return validStatus;
			},
			//验证提示信息
			dateRangeText : '开始日期不能大于结束日期，请重新选择。'
		});
		Ext.QuickTips.init();//初始化提示;
		var dateForm = Ext.create('Ext.form.Panel',{
			title:'自定义日期范围验证示例',
			frame : true,
			width:250,
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			fieldDefaults:{//统一设置表单字段默认属性
				autoFitErrors : false,//不自动调整字段宽度
				labelSeparator :'：',//分隔符
				labelWidth : 90,//标签宽度
				width : 210,//字段宽度
				format:'Y年n月j日',//显示日期的格式
				editable : false,//设置只读
				allowBlank : false,//不允许为空
				msgTarget : 'side'//设置提示信息展示位置
			},
			defaultType: 'datefield',//设置表单字段的默认类型
			items:[{
				id:'beginDate1',
				fieldLabel:'入学开始日期',
				dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange
				vtype:'dateRange'
			},{
				id:'endDate1',
				fieldLabel:'入学结束日期',
				dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange
				vtype:'dateRange'
			},{
				id:'beginDate2',
				fieldLabel:'毕业开始日期',
				dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange
				vtype:'dateRange'
			},{
				id:'endDate2',
				fieldLabel:'毕业结束日期',
				dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange
				vtype:'dateRange'
			}]
		});
	});
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px"></BODY>
</HTML>
